<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <style>
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    align: left;
    valign: left;
}
</style>
    <script src="./echart/echarts.common.min.js"></script>
</head>
<body>
<div id="main"
     style="height: 100%; width: 100%; border: 0px; text-align: left; align: left;">
</div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      myChart.showLoading();
      function paintEcharts(str) {
      	    var json = str;
      	    // 指定图表的配置项和数据
		    var option = {
		      title: {
		          text: ''
		      },
		      tooltip: {
		      },
              legend: {
		          data: ['指标']
		      },
		      dataZoom:[
					{
					    type:'slider',
						start: 0,
						end: 100,
						realtime:false,
						handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
						handleSize: '100%',
						handleStyle: {
							color: '#fff',
							shadowBlur: 3,
							shadowColor: 'rgba(0, 0, 0, 0.6)',
							shadowOffsetX: 2,
							shadowOffsetY: 2
						}
					}
			  ],
		      xAxis: {
					name:'时间',
					type:'time',
					axisLine:{
						onZero:false
					}
		      },
		      yAxis: {
					name:'指标值',
					type:'value',
					scale:'true',
					axisLine:{
						onZero:false
					}
		      },
		      series: [{
		          name: '时间-指标值',
		          type: 'line',
		          symbol:'circle',
				  symbolSize:4,
		          data:json.data
		      }]
		  	};
      	// 使用刚指定的配置项和数据显示图表。
        myChart.hideLoading();
      	myChart.setOption(option);
      }
  </script>
</body>
</html>
